<template>
  <div class="all">
    <!-- 上边栏 -->
    <div class="top_show clearfix">
      <div class="top_left">
        <div class="flex-row flex-center clearfix" style="height: 100%">
          <span style="font-family: tangti; font-size: 48px; color: white"
            >智选良师</span
          >
        </div>
      </div>
      <div class="top_right flex-row" style="justify-content: flex-end">
        <i class="el-icon-user-solid" style="color: white"></i>
        <el-popover
          placement="right"
          width="600"
          trigger="click"
          style="margin-right: 36px"
        >
          <span style="font-weight: 600"
            >您心仪的学生同意您的选择啦，请在记录下联系方式后点击确定!</span
          >
          <el-table :data="gridData">
            <el-table-column
              width="150"
              property="date"
              label="学生"
            ></el-table-column>
            <el-table-column
              width="200"
              property="name"
              label="联系方式"
            ></el-table-column>
            <el-table-column
              width="200"
              property="name"
              label="带话"
            ></el-table-column>
            <el-table-column width="50" fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >确定</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <el-button
            style="background-color: transparent; border: 0px"
            slot="reference"
          >
            <el-badge :value="1" :max="99" class="item">
              <span class="myInfo">我的信息</span>
            </el-badge>
          </el-button>
        </el-popover>
        <div @click="exitSystem">
          <span>退出</span>
          <i class="el-icon-right" style="color: white"></i>
        </div>
      </div>
    </div>
    <!-- 侧边栏 -->
    <div class="left_show">
      <div class="detail-title flex-row flex-center" style="padding-top: 16px">
        <i class="el-icon-menu" style="color: white"></i>
        <h3 class="list_title" style="cursor: pointer" @click="ChangeRouter(0)">
          后台管理
        </h3>
      </div>
      <div
        style="margin-top: 20px; gap: 12px; justify-content: center"
        class="flex-column"
      >
        <div class="flex-row flex-center">
          <h4 class="list1">教师管理</h4>
          <i
            class="el-icon-arrow-down"
            style="color: white; font-size: 16px"
          ></i>
        </div>
        <div class="list1_1" style="cursor: pointer" @click="ChangeRouter(1)">
          修改个人信息
        </div>
        <div class="list1_1" style="cursor: pointer" @click="ChangeRouter(12)">
          修改推荐条件
        </div>
        <div class="list1_1" style="cursor: pointer" @click="ChangeRouter(2)">
          查看推荐列表
        </div>
        <div class="flex-row flex-center" style="margin-top: 12px">
          <h4 class="list1">用户管理</h4>
          <i
            class="el-icon-arrow-down"
            style="color: white; font-size: 16px"
          ></i>
        </div>
        <div class="list1_1" style="cursor: pointer" @click="ChangeRouter(21)">
          学生列表
        </div>
        <div class="list1_1" style="cursor: pointer" @click="ChangeRouter(22)">
          教师列表
        </div>
        <div class="flex-center flex-row" style="margin-top: 12px">
          <h4 class="list1">信息处理</h4>
          <i
            class="el-icon-arrow-down"
            style="color: white; font-size: 16px"
          ></i>
        </div>
        <div class="list1_1" style="cursor: pointer" @click="ChangeRouter(6)">
          推荐互选
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';

export default {
  name: "homeHeader",
  components: {},
  data() {
    return {
      name: "",
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    ChangeRouter(pageNum) {
      if (pageNum == 0) {
        this.$router.push({ path: "/index" });
      } else if (pageNum == 1) {
        this.$router.push({ path: "/changeinfo" });
      } else if (pageNum == 12) {
        this.$router.push({ path: "/changeRecommand" });
      } else if (pageNum == 2) {
        this.$router.push({ path: "/recommandList" });
      } else if (pageNum == 21) {
        this.$router.push({ path: "/UserManage" });
      } else if (pageNum == 6) {
        this.$router.push({ path: "/CheckRights" });
      } else if (pageNum == 22) {
        this.$router.push({ path: "/teacherList" });
      }
    },
    exitSystem(){
      sessionStorage.removeItem("userInfo")
      this.$router.push("/")
      Message.info("已经退出登录！")
    }
  },
  mounted() {},
};
</script>

<style scoped>
@import "../../style/header.css";
</style>